<template>
  <div class="content-box">
    <div class="tab-box flex ac">
      <div class="charging-tab-box flex ac">
        <div
          @click="tabActive = item.id"
          class="charging-tab-box-items"
          :class="tabActive == item.id ? 'charging-tab-box-items-active' : ''"
          v-for="(item, index) in tabList"
          :key="index"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="padding-box">
      <div class="search-box">
        <el-form inline :model="searchForm" class="demo-form-inline">
          <el-form-item label="" v-if="tabActive == 2">
            <el-input
              v-model="searchForm.user"
              placeholder="请输入店铺名称 "
              clearable
              class="input-box"
            />
          </el-form-item>
          <el-form-item v-if="tabActive == 2">
            <el-button class="search-btn" type="primary">查询</el-button>
          </el-form-item>
          <el-form-item v-if="tabActive == 1">
            <el-button
              class="add-btn"
              type="primary"
              :icon="Plus"
              @click="dialogVisibleCode = true"
            >
              添加店铺会员
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
          stripe
          :header-cell-style="{
            color: '#828A9D',
            textAlign: 'center',
            height: '60px',
          }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }"
        >
          <el-table-column prop="date" v-if="tabActive == 1" label="手机号" />
          <el-table-column prop="name" v-if="tabActive == 1" label="创建时间" />
          <el-table-column
            prop="state"
            v-if="tabActive == 1"
            label="免费时长（小时）"
          />
          <el-table-column prop="city" v-if="tabActive == 2" label="店铺名称" />
          <el-table-column prop="address" v-if="tabActive == 2" label="地址" />
          <el-table-column prop="zip" v-if="tabActive == 2" label="会员上限" />
          <el-table-column prop="zip" v-if="tabActive == 2" label="会员人数">
            <template #default="scope">
              <span class="vip-num" @click="dialogVisibleVip = true">10</span>
            </template>
          </el-table-column>
          <el-table-column prop="zip" label="操作" width="320px">
            <template #default="scope">
              <el-button type="primary" v-if="tabActive == 1" link>
                取消会员
              </el-button>
              <el-button
                type="primary"
                v-if="tabActive == 2"
                link
                @click="dialogVisibleCode = true"
              >
                生成二维码
              </el-button>
              <el-button
                type="primary"
                v-if="tabActive == 2"
                link
                @click="changeMaxMan"
              >
                会员上限
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box flex jc">
        <el-pagination
          v-model:page-size="searchForm.pageSize"
          v-model:current-page="searchForm.page"
          :total="searchForm.totalAll"
          @change="sizePageChangeFunc"
          background
          layout="total,sizes,prev, pager, next,jumper"
        />
      </div>
    </div>
  </div>
  <!-- 会员二维码 -->
  <vipQrCodeCom
    :show="dialogVisibleCode"
    @onClose="dialogVisibleCode = false"
  ></vipQrCodeCom>
  <!-- 会员列表 -->
  <vipListCom
    :show="dialogVisibleVip"
    @onClose="dialogVisibleVip = false"
  ></vipListCom>
</template>
<script setup>
import { onMounted, reactive, toRefs, ref, getCurrentInstance } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import vipQrCodeCom from '@/components/vipQrCodeCom/index.vue'
import vipListCom from '@/components/vipListCom/index.vue'
const { proxy: that } = getCurrentInstance()
onMounted(() => {
  console.log('index')
})
// 店铺最大会员数
const changeMaxMan = () => {
  that
    .$prompt('店铺会员人数上限', '会员上限', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      inputPattern: /^\d+$/,
      inputErrorMessage: '请输入上线人数',
    })
    .then(({ value }) => {})
    .catch(() => {})
}
// 会员列表
let dialogVisibleVip = ref(false)
// 生成二维码
let dialogVisibleCode = ref(false)
// 搜索
let searchForm = ref({
  pageSize: 10,
  page: 1,
  totalAll: 0,
})
const sizePageChangeFunc = e => {
  console.log(searchForm.value)
}
let tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
let tabActive = ref(1)
let tabList = ref([
  {
    name: '平台会员',
    id: 1,
  },
  {
    name: '店铺会员',
    id: 2,
  },
])
</script>
<style scoped lang="scss">
@import './index.scss';
</style>